import React, { Component, Fragment } from "react";
import { Form, Input, Button, Row, Col, message } from "antd";
import "./index.scss";
import { UserOutlined, LockOutlined, UnlockOutlined } from "@ant-design/icons";
//引入加密插件
import CryptoJS from "crypto-js";
//引入验证码组件
import Code from "../../components/code/index";
import { validate_password } from "../../utils/verification";
//API
import { Register } from "../../api/account";
export default class Regisfrom extends Component {
  state = {
    username: "",
    module: "register",
    code: "",
    password: "",
  };
  onFinish = (values) => {
    const resquestData = {
      username: this.state.username,
      password: CryptoJS.MD5(this.state.password).toString(),
      code: this.state.code,
    };
    Register(resquestData)
      .then((res) => {
        //注册成功
        const data = res.data;
        message.success(data.message);
        if (data.resCode === 0) {
          this.toggleFrom();
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };
  //切换到登录页面,
  toggleFrom = () => {
    this.props.switchFrom("login");
  };
  //邮箱输入框
  inputChangUsername = (event) => {
    let value = event.target.value;
    this.setState({
      username: value,
    });
  };
  //密码输入框
  inputChangPassword = (event) => {
    let value = event.target.value;
    this.setState({
      password: value,
    });
  };
  //验证码输入框
  inputChangCode = (event) => {
    let value = event.target.value;
    this.setState({
      code: value,
    });
  };
  render() {
    const { username, module } = this.state;
    return (
      <Fragment>
        <div className="form-header">
          <h4 className="login">注册</h4>
          <span onClick={this.toggleFrom}>登录</span>
        </div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: "邮箱不能为空",
              },
              {
                required: true,
                message: "邮箱格式不正确",
              },
            ]}
          >
            <Input
              onChange={this.inputChangUsername}
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入邮箱"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "密码不能为空",
              },
              ({ getFieldValue }) => ({
                //ES6结构
                validator(_, value) {
                  //再次输入密码的值
                  const passwords_value = getFieldValue("passwords");
                  //判断两次密码是否一致

                  if (!validate_password(value)) {
                    return Promise.reject("请输入大于6位小于20位的数字,字母");
                  }
                  if (passwords_value && value !== passwords_value) {
                    return Promise.reject("两次密码不一致");
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input
              onChange={this.inputChangPassword}
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          <Form.Item
            name="passwords"
            rules={[
              {
                required: true,
                message: "再次确认密码不能为空",
              },
              ({ getFieldValue }) => ({
                //ES6结构
                validator(_, value) {
                  if (value !== getFieldValue("password")) {
                    return Promise.reject("两次密码不一致");
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请再次输入密码"
            />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[
              {
                required: true,
                message: "请输入验证码",
              },
              { len: 6, message: "请输入6位验证码" },
            ]}
          >
            <Row gutter={13}>
              <Col span={16}>
                <Input
                  onChange={this.inputChangCode}
                  prefix={<UnlockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="请输入验证码"
                />
              </Col>
              <Col span={8}>
                <Code username={username} module={module}></Code>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              block
              className="login-form-button"
              htmlType="submit"
            >
              注册
            </Button>
          </Form.Item>
        </Form>
      </Fragment>
    );
  }
}
